import { Directive, ElementRef, Input,HostListener} from '@angular/core';


@Directive({ selector: '[myHighlight]' })  //my-high-light



export class HighlightDirective {


//     组件 — 拥有模板的指令
// 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
// 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。
  
//     @Input() highlight(color: string) {
//     this.el.nativeElement.style.backgroundColor = color;
//   }

    constructor(private el: ElementRef) {  //参数里是 private的 在下面也要private
       el.nativeElement.style.backgroundColor = 'blue';
    }

     @Input() defaultColor: string; //定义了一个属性在div模板上

      @Input('myHighlight') highlightColor: string;     //直接传到myHighlight指令里的。。。
        
    @HostListener('mouseenter') onMouseEnter() {
      //this.highlightColor = 'black';
      console.log('this.highlightColor',this.highlightColor);
      console.log('this.defaultColor',this.defaultColor);      
  //  this.highlight('red');
      this.highlight( this.highlightColor ||this.defaultColor|| 'red');
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  //highlight 搞成一个方法??...
   private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }
}